

<!-- 拖拽排序激活标签 -->
<sortable>
  <script>
    var tag = this;
    tag.fn = {};
    tag.on('mount', function(){
      var cfg = {
        group: opts.group,
        sort: (opts.sort || 1) == 0 ? false : true,
        animation: 100,
        onSort: opts.onSort || function(){},
        onEnd: opts.onEnd || function(){},
        onAdd: opts.onAdd || function(){}
      };
      if(pip.typeOf(Sortable) !== 'Function') throw '请加载Sortable模块';
      if(!opts.sortRef) return tag.app.log('请为sortable设置sort-ref属性');
      if(!opts.group) return tag.app.log('请为sortable设置group属性');
      if(opts.dragItem) cfg.draggable = opts.dragItem;
      if(opts.dragHandle) cfg.handle = opts.dragHandle;
      new Sortable(tag.parent.refs[opts.sortRef], cfg);
    });
  </script>
</sortable>

<!-- 可往布局里添加组件列表 -->
<draggable-modules>
  <style scoped>
  :scope ul{}
  :scope li{display: inline-block; width: 100px; height: 120px; text-align: center; border: 1px solid #ddd; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,.18); cursor: move; margin-right: 20px; position: relative; background: #fff}
  :scope li .text{position: absolute; bottom: 0; width: 100%; padding: 5px 0;}
  :scope li .display{display: none;}
  :scope .sortable-ghost{}
  </style>

  <sortable sort-ref="modules" group="{{name: 'modules', pull: 'clone'}}" sort="0" drag-item=".item" on-end="{fn.onEnd}"/>
  <ul ref="modules">
    <li class="item" each="{module in moduleList}">
      <div class="icon-{module.name}"></div>
      <div class="text">{module.text}</div>
      <div class="display">添加到这里</div>
    </li>
  </ul>

  <script>
    var tag = this;
    tag.moduleList = [
      {name: 'text', text: '文本'},
      {name: 'pic-text', text: '图+文字'},
      {name: 'hr', text: '分隔线'},
      {name: 'btn', text: '按钮'},
      {name: 'list', text: '列表'}
    ];
    tag.fn = {
      onEnd: function(e){
        tag.emit('dragEnd', tag.moduleList[e.oldIndex]);
      }
    };
    tag.on('mount', function(){});
  </script>
</draggable-modules>


<!-- 浮层 -->
<overlayer>
  <style scoped>
  :scope{position: absolute; top: 0; left: 0; width: 100%; height: 100%;  z-index: 9;}
  :scope:hover{box-shadow: 0 0 0 1px #eee inset;}
  :scope .bar{background: #eee; display: none; font-size: 12px; padding: 5px; overflow: hidden; color: #000}
  :scope .drag{float: left; cursor: move;}
  :scope .edit, :scope .remove{ float: right; cursor: pointer;}
  :scope:hover .bar{display: block; opacity: .8}
  </style>
  <div class="bar">
    <div class="drag"><i class="icon-move"></i></div>
    <div class="remove" onclick="{fn.remove}"><i class="icon-trash"></i></div>
    <div class="edit" onclick="{fn.edit}"><i class="icon-edit-alt"></i></div>
  </div>
  <script>
    var tag = this;
    tag.fn = {
      edit: function(){
        tag.parent.emit('edit');
      },
      remove: function(){
        tag.parent.emit('remove');
      }
    };
    tag.on('mount', function(){});
  </script>
</overlayer>
